<template>
  <!-- 我的排班 -->
  <view class="Teamstatistics">
    <view class="MyStatisticsHome">
      <!-- 个人信息 -->
      <view class="detail-item">
        <view class="rank-box">
          <view class="user-info-left">
            <image v-if="user.img_url" class="user-photo" :src="user.img_url" mode=""></image>
            <view class="user-name-image" v-else>{{ user.worker_name }}</view>
          </view>
        </view>

        <view class="user-info">
          <text class="name">{{ user.worker_name }}</text>
        </view>

      </view>

      <view style="padding: 10px;">
        <calendar :dataList="dataList"></calendar>
      </view>

    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/pinia-store/user';
import { mapStores } from 'pinia';
import calendar from './calendar.vue'
import { getPaibaninfo } from '@/apis/Attcemannt/index'
export default {
  components: { calendar },
  data () {
    return {
      user: {
        img_url: '',
        worker_name: '',
        worker_id: ''
      },
      dataList: []
    }
  },
  computed: {
    ...mapStores(useUserStore)
  },
  created () {
    this.user = this.userStore.user ? this.userStore.user : JSON.parse(uni.getStorageSync('user'))?.user
    this.getgetPaibaninfo()
  },
  methods: {
    async getgetPaibaninfo () {
      uni.showLoading({ title: '加载中...' });
      try {
        let res = await getPaibaninfo({
          worker_id: this.user.worker_id
        })

        if (res.status == 1) {
          this.dataList = res.data
          uni.hideLoading();
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.msg || '获取失败',
            icon: 'error',
            duration: 2000
          });
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '获取失败',
          icon: 'error',
          duration: 2000
        });
      }
    },

  }
}
</script>

<style lang="scss" scoped>
:deep(.up-subsection) {
  width: 100%;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 20px;
}

.Teamstatistics {
  width: 100%;

  .MyStatisticsHome {
    height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;

    .detail-item {
      height: 5vh;
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 10rpx;
      border-bottom: 1px solid #eee;

      .user-info {
        flex: 1;
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;

        .name {
          font-size: 32rpx;
          font-weight: bold;
        }

        .department {
          font-size: 24rpx;
          color: #999;
        }
      }

      .time-box {
        text-align: right;
        margin-right: 20rpx;

        .time-label {
          display: block;
          font-size: 24rpx;
          color: #999;
        }

        .time {
          font-size: 36rpx;
          color: #07c160;
          font-weight: 500;
        }
      }
    }





  }
}


.user-info-left {
  display: flex;

  .user-photo {
    width: 86rpx;
    height: 86rpx;
    border-radius: 8rpx;
  }

  .user-name-image {
    width: 86rpx;
    height: 86rpx;
    line-height: 86rpx;
    text-align: center;
    color: #fff;
    border-radius: 8rpx;
    background-color: #0195FF;
  }

  .user-name {
    margin-top: 8rpx;
    margin-left: 28rpx;
    font-size: 28rpx;
    color: #555;
  }

  .user-viewrule {
    margin-left: 28rpx;
    font-size: 24rpx;
    color: #aaa;
    margin-top: 10rpx;

    text {
      margin-left: 8rpx;
      color: #0195FF;
    }
  }
}
</style>